<template>
  <div class="setBg">
    <el-header class="animated faedOutUp"><span class="setFond">•&nbsp;&nbsp;华山论剑&nbsp;&nbsp;•</span></el-header>
    <el-row style="el-row">
      <el-col :span="4" v-for="(item,index) in levels" :key="index" :offset="index > 0 ? 1 : 0">
        <el-card shadow="hover" @click.native="enter(item)">
          <div slot="header" class="clearfix">
            <span>{{item.level}}</span>
          </div>
          <!-- <div>
            <el-button type="primary" size="mini" @click="enter(item)">&nbsp;进入&nbsp;</el-button>
          </div> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentDate: new Date(),
        levels: [{
            level: "easy"
          },
          {
            level: "medium"
          },
          {
            level: "hard"
          },
          {
            level: "insuperable"
          },
          {
            level: "hell"
          }
        ]
      }
    },
    methods: {
      enter(item) {  //进入
        //this.$router.push({ path: "./experimentCompetition" });
        this.$router.push({name:"experimentModule/experimentCompetition",  
        query:{difficulty:item.level}})  //传参：data.id
        //this.$router.push({ name: "experimentModule/experimentCompetition" });
      },
    }
  }
</script>

<style scoped>
  .setBg{
    background: url('~@/assets/img/competitionTitle.png') center 0 no-repeat;
    padding:15px;
  }
  .setFond{
    color: white;
  }
  .el-row {
    display: flex;
    justify-content: center;
    margin: 0 5%;
  }
  .head {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-header {
    font-size: 30px;
    color: #409eff;
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }

  .clearfix {
    font-size: 25px;
  }
  .el-card {
    height: 300px;
    margin-top: 50px;
    background-image: linear-gradient(#6172f3, #493894);
    border-radius: 20px;
    line-height:220px;
    color: white;
  }
  .el-card /deep/ .el-card__header{
    border-bottom: 0;
  }
  .el-button{
    border-radius: 100px;
  }
</style>